<template>
  <div>
    <img
      style="
        display: block;
        width: 2rem;
        height: 2rem;
        margin: 2.5rem auto 0.7rem;
      "
      src="https://img.kerry.top/FjVSHR6nOYM2qi5UkYidAs2eT-bd"
      alt="logo"
    />
    <van-form
      @submit="onSubmit"
      @failed="failed"
      :show-error-message="false"
      :show-error="false"
    >
      <template v-if="status === 1">
        <van-field
          key="2"
          style="height: 1rem"
          v-model="phone"
          name="phone"
          label="手机号:"
          placeholder="请输入手机号"
          :rules="[{ pattern, message: '请输入正确的手机号码' }]"
        />
        <van-field
          style="height: 1rem"
          v-model="password"
          name="password"
          label="密码:"
          type="password"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请输入密码' }]"
        />

        <div class="forget"><span @click="status = 2">忘记密码?</span></div>
      </template>
      <template v-if="status === 2">
        <van-field
          key="1"
          style="height: 1rem"
          v-model="backPhone"
          clearable
          center
          name="backPhone"
          label="手机号:"
          placeholder="请输入手机号"
          :rules="[{ pattern, message: '请输入正确的手机号码' }]"
        >
          <template #button>
            <span class="forget" style="margin: 0" @click="send">
              {{ sendTime ? `${sendTime}秒后，重新获取` : "发送验证码" }}
            </span>
          </template>
        </van-field>
        <van-field
          style="height: 1rem"
          v-model="code"
          name="code"
          label="验证码:"
          placeholder="请输入验证码"
          :rules="[{ required: true, message: '请输入验证码' }]"
        />
        <van-field
          style="height: 1rem"
          v-model="newPwd"
          name="newPwd"
          label="新密码:"
          type="password"
          placeholder="请输入新密码"
          :rules="[{ required: true, message: '请输入新密码' }]"
        />
        <van-field
          style="height: 1rem"
          v-model="newPwdConfirm"
          name="newPwdConfirm"
          label="确认密码:"
          type="password"
          placeholder=""
          :rules="[
            {
              validator,
              message: value => (value ? '两次密码不一致' : '请输入确认密码')
            }
          ]"
        />
        <div class="forget"><span @click="status = 1">&lt;&lt; 返回</span></div>
      </template>
      <div style="margin: 0.3rem 0.16rem">
        <van-button round block native-type="submit"> 登录 </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      status: 1, // 1 登录 2 找回密码
      pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, // 手机号码 的校验正则
      phone: "", // 登录的手机号
      password: "", // 登录密码
      backPhone: "", // 找回密码手机号
      code: "", // 验证码
      newPwd: "", // 新密码
      newPwdConfirm: "", // 新密码确认
      sendTime: 0 // 发送验证码后倒计时
    };
  },
  methods: {
    validator(val) {
      return val === this.newPwd;
    },
    failed(info) {
      console.log(info);
      this.$notify(info.errors[0].message || "请填写完后在提交");
    },
    // 提交
    onSubmit(values) {
      console.log(values);
      // this.$toast({
      //   message: `欢迎回来，${values.phone}`,
      //   overlay: true,
      //   closeOnClick: true,
      //   forbidClick: true,
      //   duration: 1500,
      //   onClose: () => console.log(111)
      // });
      this.$dialog.alert({
        title: "登录成功！",
        message: `欢迎回来，${values.phone}`,
        callback: () => this.$router.push("/user/list")
      });
    },
    // 发送验证码
    send() {
      if (!this.backPhone) {
        this.$notify("请先输入手机号码");
        return;
      }
      // 已发送手机信息，且还没超过30s 不重新发请求
      if (this.sendTime) return void 0;
      console.log("发送验证码中...");
      this.sendTime = 30;
      this.setInterval = setInterval(() => {
        if (this.sendTime <= 0) {
          clearInterval(this.setInterval);
          return;
        } else this.sendTime--;
      }, 1000);
    }
  },
  beforeDestroy() {
    clearInterval(this.setInterval);
  }
};
</script>

<style lang="less">
.van-button.van-button--default.van-button--large.van-dialog__confirm {
  color: #fff;
}
.forget {
  margin: 0.3rem 0.4rem;
  font-size: 0.18rem;
  text-align: right;
  color: orange;
  cursor: pointer;
}
</style>
